<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bs/css/bootstrap.css">
    <script src="./vue.js"></script>
</head>

<body>
    <form id="app">
        <div class="form-group">
            <label for="exampleInputEmail1">姓名</label>
            <input type="text" class="form-control" id="" placeholder="姓名" v-model="value1">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">电话</label>
            <input type="text" class="form-control" id="" placeholder="电话" v-model="value2">
        </div>
        <button type="button" class="btn btn-danger" @click="add" v-show="flag">添加</button>
        <button type="button" class="btn btn-danger" v-show="!flag" @click="modify1">修改</button>
        <button type="button" class="btn btn-warning" @click="reset">重置</button><br>
        <table class="table table-bordered">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.tel}}</td>
                <td>
                    <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                    <button type="button" class="btn btn-warning" @click="modify(index)">修改</button><br>
                </td>
            </tr>
            <tr>
                <td colspan="4" v-show="arr.length==0">
                    暂无数据
                </td>
            </tr>
        </table>
        <button type="button" class="btn btn-warning" v-show="arr.length>=1" @click="all_del">全部删除</button>
    </form>
    <script>
       
        new Vue({
            el: "#app",
            data: {
                value1:"",
                value2:"",
                col1: "暂无数据",
                arr:[],
                flag:true,
                ind:0
            },
            methods:{
                add(){
                    if(this.value1=="" || this.value2=="") return
                    this.arr.push({   
                        name:this.value1,
                        tel:this.value2,
                    })
                    this.value1=""
                    this.value2=""
                },
                reset(){
                    this.value1=""
                    this.value2=""
                },
                del(m){
                    this.arr.splice(m,1)
                },
                modify(n){
                    this.value1=this.arr[n].name
                    this.value2=this.arr[n].tel
                    this.flag=false
                    this.ind=n
                },
                modify1(){
                    this.flag=true
                    this.arr[this.ind].name=this.value1
                    this.arr[this.ind].tel=this.value2
                    this.value1=""
                    this.value2=""
                },
                all_del(){
                    this.arr=[]
                }
            }
        })
    </script>
</body>

</html>